The Canvas Page is a special sub-page that can optionally be created within the SML configuration dialog for a Contest. The Canvas page is used to display a single entry, as opposed to the entire contest, and can be configured to also include all of the comments and votes that that specific entry has received.

You can create a link to a users canvas page from within the for loop or on the success page of a contest by using the contest_entry_canvas_page_url context variable.

In the following example we've created a canvas page for a video contest using the? content_vote to count votes facebook_comments to directly solicit comments. Doing it this way means we cannot style the comment boxes directly because they're proprietary Facebook code protected by an iFrame; but in return for that loss of functionality we gain the ability to analyze how the data is being shared and we gain viral exposure for our clients contest through organic wall posts from users.

<div class="feature_candidate" id="{{ contest_entry.id }}">
    <div class="entrybox">
        <div class="entryvid">
            {% if contest_entry.submission.file_encoding_status == 'done' %}
                {% video_player video_url:contest_entry.submission.file_encoded_video_url imgsrc:contest_entry.submission.file_thumbnail_url width:290 %}

            {% else %}
                <p>Your Video is Still Encoding<br>
                {{ contest_entry.submission.file_encoding_status }}</p>
            {% endif %}
        </div><!-- end entry vid -->

        <div class="entrytext">
            <h4>{{ contest_entry.registration.first_name }} {{ contest_entry.registration.last_name }}</h4>
            <p>Added: {{ contest_entry.published_at | date: "%m/%d/%y" }}</p>
            <p>{{ contest_entry.submission.videodescription }}</p>
        </div><!-- end entry text -->

        <p class="votebox submit">{% content_vote contest_entry %}</p>

        <div class="social">
            {% share contest_entry %}
        </div><!-- end Comment Social -->
    </div><!-- end entrybox -->
</div><!-- end featured candidate -->

<!-- begin comment field -->
<div class="addcomment">
    {% facebook_comments contest_entry %}
</div><!-- end addcomment field -->

<p><a href="{{ application_url }}">Go back to Tab</a></p>

This is a very sophisticated example with a lot of moving parts. Let's break it apart to make it easier to analyze. The first thing you'll notice is that we do not need to call the contest or set up a ?for loop because we are already inside the for loop of the main contest page. Everything that happens on this canvas page actually takes place inside of that loop. This means we can use ?share and other SML social tags anywhere in the page without worrying about position relative to the loop.

The page has several distinct parts.

• We have an .entrybox div that holds and structures our main entry data, in this case a video submission which we've wrapped in a basic ?if / ?then statement that gives a generic error message if the video has not yet been encoded.
• .entrytext structures the rest of the relevant data from our entry form: first name, last name, date of entry, and the text description the user gave of their video.
• ?The content_vote in .votebox_submit creates our voting mechanism.  you might be tempted to use Facebook_like here instead but doing so would be a violation of Facebook's terms of service and the votes could not be counted by the Contest application.  So stick with content_like.
• .social uses the ?share tag to give the user a second opportunity to share this contest entry with their friends.
• And finally, all the way at the bottom we call ?facebook_comments and specify that the comments will be applied to this specific contest entry.

You'll notice that all of the social tags in this example point to this specific contest entry as opposed to the contest as a whole. In order to leave a comment on the contest as a whole the user will need to return to the contest tab. We'll use a hard-coded link at the bottom to give them the opportunity to head back.